<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加表格内容</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
    	    table {
    	      width: 600px;
    	      cursor: pointer;
    	    }
    	    table td {
        	      text-align: center;
        	    }
        	    table th {
        	      background-color: blueviolet;
        	    }
        	    table tr {
        	      background-color: pink;
        	    }
        	  </style>
       
</head>
<body>
      <div id="dv">
        请输入姓名:
        <input type="text" value="" id="uname"/>
        <br/> 请输入邮箱:
        <input type="text" value="" id="email"/>
      </div>
      <input type="button" value="添加" id="btn" />
      <table border="1" cellpadding="0" cellspacing="0" id="tb">
        <thead>
          <tr>
            <th>姓名</th>
               <th>邮箱</th>
          </tr>
        </thead>
        <tbody id="tbd">
          <tr>
            <td>小黑</td>
            <td>xiaohei@126.com</td>
          </tr>
        </tbody>
      </table>
       <script>
           $(function(){
               $("#btn").click(function(){
                   var name=$("#uname").val();
                   var email=$("#email").val();
                   var str="<tr><td>"+name+"</td><td>"+email+"</td></tr>";
                   $("#tbd").append(str);
               })
           })
       </script>
</body>
</html>